<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../font/iconfont.js"></script>
    <link rel="stylesheet" href="../font/iconfont.css">
    <link rel="stylesheet" href="./all.css">
    <script src="https://hammerjs.github.io/dist/hammer.js"></script>
    <title>动态</title>
    <style>
        html {
            font-size: 62.5%;
        }

        body {
            margin-top: 6.1rem;
            margin-bottom: 5.5rem;
            background-color: rgb(241, 242, 244);
        }

        .top {
            width: 100%;
            height: 6rem;
            display: flex;
            position: fixed;
            left: 0;
            top: 0;
            background-color: #fff;
            align-items: center;
            justify-content: center;
            border-bottom: .1rem solid rgb(229, 229, 231);
            z-index: 5;
        }

        .top li {
            box-sizing: border-box;
            width: 23%;
            display: flex;
            justify-content: center;
        }

        .top>li>p {
            height: 3rem;
            font-size: 1.5rem;
            text-align: center;
            line-height: 3rem;
        }

        .top>li>.cur {
            font-size: 1.9rem;
            font-weight: bold;
            color: rgb(253, 102, 153);
            text-align: center;
        }
        .pink{
            height: .3rem;
            width: 3.8rem;
            background-color: rgb(253, 102, 153);
            position: fixed;
            right: 12rem;
            top: 5rem;
            z-index: 12;
            transition: all .2s ease-in-out;
        }

        .visible {
            display: none;
        }

        .show {
            display: block;
        }

        /* 右上角的图标 */
        html {
            position: relative;
        }

        body>a>svg {
            font-size: 2.2rem;
            position: absolute;
            top: 2rem;
            right: 2rem;
            z-index: 5;
            position: fixed;
        }

        .search {
            width: 100%;
            height: 4.5rem;
            border-bottom: .1rem solid rgb(229, 229, 231);
            position: relative;
            background-color: #fff;

        }

        .search>div {
            width: 90%;
            left: 0;
            top: 6rem;
            border-radius: 2rem;
            background-color: rgb(241, 242, 244);
            display: flex;
            align-items: center;
            padding-right: 1rem;
            margin-left: 1rem;
            position: absolute;
            left: .2rem;
            top: .6rem;
        }

        .search>div>svg {
            font-size: 2rem;
            color: rgb(192, 192, 192);
            background-color: rgb(241, 242, 244);
            margin: 0 1rem 0 1.5rem;
        }

        #search {
            height: 3rem;
            border: none;
            outline: none;
            background-color: rgb(241, 242, 244);
            flex-grow: 1;
        }

        #search1 {
            height: 3rem;
            border: none;
            outline: none;
            background-color: rgb(241, 242, 244);
            flex-grow: 1;
        }

        input::-webkit-input-placeholder {
            /* placeholder颜色 */
            color: rgb(192, 192, 192);
            /* placeholder字体大小 */
            font-size: 1.5rem;
            position: relative;
            top: .1rem;
        }

        .visit {
            height: 13rem;
            background-color: #fff;
        }

        .visit>div,
        .channel>div {
            height: 1.6rem;
            padding-top: 1.4rem;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        .visit>div>p:first-child,
        .channel>div>p:first-child {
            font-size: 1.4rem;
            font-weight: bold;
            width: 44%;
        }

        .visit>div>p:last-child,
        .channel>div>p:last-child {
            font-size: 1rem;
            color: rgb(149, 153, 156);
            width: 44%;
            text-align: end;
        }

        .visit>div>p:last-child>svg,
        .channel>div>p:last-child>svg {
            margin-bottom: .1rem;
        }

        .visit>ul {
            display: flex;
            align-items: center;
            margin-top: 1.4rem;
            overflow-x: scroll;
        }

        .visit>ul::-webkit-scrollbar {
            display: none;
        }

        .visit>ul>li:last-child div {
            width: 4rem;
            height: 4rem;
            line-height: 4rem;
            margin-left: 1rem;
            margin-bottom: .5rem;
            text-align: center;
            background-color: rgb(241, 242, 244);
            border-radius: 5rem;
        }

        .visit>ul>li:last-child svg {
            font-size: 1.5rem;
            color: rgb(149, 153, 156);
        }

        .visit>ul>li {
            width: 17%;
            flex-shrink: 0;
            margin: 0 .5rem;
        }

        .visit>ul>li img {
            height: 4rem;
            margin-left: 1rem;
            margin-bottom: .3rem;
            border-radius: 50%;
        }

        .visit>ul>li p {
            height: 3.2rem;
            font-size: 1.1rem;
            color: rgb(72, 77, 83);
            text-align: center;
        }

        .channel {
            height: 10rem;
            margin-top: 1rem;
            background-color: #fff;
        }

        .channel>ul {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-around;
            margin-top: 1rem;
        }

        .channel>ul>li {
            width: 45%;
        }

        .channel>ul>li:nth-of-type(1),
        .channel>ul>li:nth-of-type(3) {
            border-right: .1rem solid rgb(234, 236, 235);
        }

        .channel>ul>li p {
            font-size: 1.5rem;
            line-height: 2.5rem;
        }

        .context {
            margin-top: 1rem;
            background-color: #fff;
        }

        .context>ul:nth-of-type(1) {
            height: 5.5rem;
            display: flex;
            align-items: center;
        }

        .context>ul:nth-of-type(1)>li:first-child {
            width: 5rem;
        }

        .context>ul:nth-of-type(1)>li:nth-of-type(2) {
            flex-grow: 1;
        }

        .context>ul:nth-of-type(1)>li:last-child {
            width: 2.5rem;
            font-size: 1.4rem;
        }

        .context>ul:nth-of-type(1)>li img {
            width: 3.5rem;
            border-radius: 50%;
            margin-left: .75rem;
        }

        .context li p:first-child {
            font-size: 1.4rem;
            font-weight: bold;
            color: rgb(253, 102, 153);
            margin-bottom: .2rem;
            margin-left: .3rem;
        }

        .context li p:last-child {
            font-size: 1rem;
            color: rgb(90, 92, 94);
            margin-left: .2rem;
        }

        .context>div:nth-of-type(1) {
            margin-top: 1rem;
            position: relative;
        }

        .context>div>img {
            height: 20rem;
            width: 94%;
            margin-left: 3%;
            border-radius: 2%;
        }

        .context>p:nth-of-type(1) {
            font-size: 1.5rem;
            margin-left: 3%;
            margin-top: .5rem;
            font-weight: bold;
        }

        .context>p:nth-of-type(2) {
            font-size: 1.5rem;
            font-weight: bold;
            margin-left: 3%;
            margin-top: .5rem;
        }

        .context>div>div {
            width: 94%;
            display: flex;
            position: absolute;
            align-items: flex-end;
            justify-content: space-between;
            left: 1.8rem;
            bottom: .3rem;
        }

        .context>div>div>ul {
            width: 60%;
            height: 3rem;
            display: flex;
            align-items: center;

        }

        .context>div>div li:first-child {
            background-color: rgba(0, 0, 0, .4);
            border-radius: .2rem;
            width: 17%;
        }

        .context>div>div li:last-child {
            text-align: start;
        }

        .context>div>div li {
            width: 35%;
            color: rgba(255, 255, 255, .9);
            font-size: 1.2rem;
            line-height: 2rem;
            text-align: center;
        }

        .context>div>div svg {
            width: 25%;
            color: rgba(255, 255, 255, .7);
            font-size: 5.5rem;
            text-align: center;
        }

        .context>div:nth-of-type(2) {
            height: 3.5rem;
            display: flex;
            align-items: flex-start;
            margin: 1rem 3% 0 3%;
            border-left: .2rem solid #ccc;
        }

        .context>div:nth-of-type(2)>svg {
            width: 15%;
            font-size: 1.2rem;
            margin-top: .2rem;
        }

        .context>div:nth-of-type(2)>p {
            font-size: 1.2rem;
        }

        .context>div:nth-of-type(2)>p>span {
            font-weight: bold;
        }

        .context>ul:nth-of-type(2) {
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-top: 1rem;
        }

        .context>ul:nth-of-type(2) li {
            font-size: 1.4rem;
            color: rgb(134, 131, 131);
            margin-bottom: 1rem;
        }

        .context>ul:nth-of-type(2) svg {
            font-size: 2rem;
            margin-right: .5rem;
        }

        .context>ul:nth-of-type(2)>li:nth-of-type(2)>svg {
            font-size: 1.8rem;
        }

        .context>ul:nth-of-type(2)>li:nth-of-type(3) svg {
            color: rgb(253, 102, 153);

        }

        .context>ul:nth-of-type(2)>li:nth-of-type(3) {
            color: rgb(253, 102, 153);
        }

        .context>div:nth-of-type(2)+ul>.thumbs-up>svg,
        .context>div:nth-of-type(2)+ul>.thumbs-up {
            color: rgb(72, 77, 83);
        }

        /*************************************************************/
        .bnav>li:nth-of-type(2) svg {
            color: rgb(253, 102, 153);
        }

        .bnav>li:nth-of-type(2) p {
            color: rgb(253, 102, 153);
        }
    </style>
</head>

<body>
    <ul class="top">
        <li>
            <p>视频</p>
        </li>
        <li>
            <p class="cur">综合</p>
        </li>
    </ul>
    <div class="pink"></div>
    <a href="#">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-s_bianji"></use>
        </svg>
    </a>

    <div class="visible">
        <div class="search">
            <div>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-sousuo"></use>
                </svg>
                <input type="search" name="search" id="search" placeholder="19001010112杨博文">
            </div>
        </div>
        <div class="visit">
            <div>
                <p>最常访问</p>
                <p>查看更多
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiantouyou"></use>
                    </svg></p>
            </div>
            <ul>
                <li>
                    <a href="#">
                        <img src="../img/bilibili2/权当是馍.jpg" alt="">
                        <p>田野上的繁荣</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../img/bilibili2/盗月社.jpg" alt="">
                        <p>盗月社食遇记</p>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="../img/bilibili2/哥俩美食.jpg" alt="">
                        <p>哥俩美食</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../img/bilibili2/欣小萌.jpg" alt="">
                        <p>-欣小萌-</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../img/bilibili2/她脚踝银铃响了.jpg" alt="">
                        <p>她脚踝银铃响了</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../img/bilibili2/乡村教师日记.jpg" alt="乡村教师日记">
                        <p>乡村教师日记</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../img/bilibili2/虎牙龙斯基.jpg" alt="虎牙龙斯基">
                        <p>虎牙龙斯基</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../img/bilibili2/方芳的快乐生活.jpg" alt="方芳的快乐生活">
                        <p>方芳的快乐生活</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../img/bilibili2/收破烂的高富帅.jpg" alt="收破烂的高富帅">
                        <p>收破烂的高富帅</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../img/bilibili2/章余飞不是章鱼飞.jpg" alt="章余飞不是章鱼飞">
                        <p>章余飞不是章鱼飞</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-jiantouyou"></use>
                            </svg>
                        </div>
                        <p>查看更多</p>
                    </a>
                </li>
            </ul>
        </div>

        <div class="context">
            <ul>
                <li>
                    <a href="./bilibili5.html">
                        <img src="../img/bilibili2/哥俩美食.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="./bilibili5.html">
                        <div>
                            <p>哥俩美食</p>
                            <p>23小时前•投稿了视频</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="./bilibili5.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-gengduo1"></use>
                        </svg>
                    </a>
                </li>
            </ul>
            <div>
                <img src="../img/bilibili2/哥俩美食shipin.jpg" alt="">
                <div>
                    <ul>
                        <li>09:03</li>
                        <li>3.9万观看</li>
                        <li>296弹幕</li>
                    </ul>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bofangqi-bofangxiaodianshi"></use>
                    </svg>
                </div>
            </div>
            <p>外卖小哥干到很晚才回家饿坏了，吃三个鸡肉卷...</p>
            <div>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xiaoxi1"></use>
                </svg>
                <p>
                    <span>imba-pizza：</span>省流助手：请看其他的省流助手
                </p>
            </div>
            <ul>
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yduifenxiang2"></use>
                    </svg>6
                </li>
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaoxi"></use>
                    </svg>155
                </li>
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dianzan"></use>
                    </svg>3533
                </li>
            </ul>
        </div>
    </div>


    <div class="visible show">
        <div class="search">
            <div>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-sousuo"></use>
                </svg>
                <input type="search" name="search" id="search1" placeholder="查找精彩动态内容">
            </div>
        </div>
        <div class="visit">
            <div>
                <p>最常访问</p>
                <p>查看更多
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiantouyou"></use>
                    </svg></p>
            </div>
            <ul>
                <li>
                    <a href="#">
                        <img src="../img/bilibili2/权当是馍.jpg" alt="">
                        <p>田野上的繁荣</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../img/bilibili2/盗月社.jpg" alt="">
                        <p>盗月社食遇记</p>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="../img/bilibili2/哥俩美食.jpg" alt="">
                        <p>哥俩美食</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../img/bilibili2/欣小萌.jpg" alt="">
                        <p>-欣小萌-</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../img/bilibili2/她脚踝银铃响了.jpg" alt="">
                        <p>她脚踝银铃响了</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../img/bilibili2/乡村教师日记.jpg" alt="乡村教师日记">
                        <p>乡村教师日记</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../img/bilibili2/虎牙龙斯基.jpg" alt="虎牙龙斯基">
                        <p>虎牙龙斯基</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../img/bilibili2/方芳的快乐生活.jpg" alt="方芳的快乐生活">
                        <p>方芳的快乐生活</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../img/bilibili2/收破烂的高富帅.jpg" alt="收破烂的高富帅">
                        <p>收破烂的高富帅</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../img/bilibili2/章余飞不是章鱼飞.jpg" alt="章余飞不是章鱼飞">
                        <p>章余飞不是章鱼飞</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-jiantouyou"></use>
                            </svg>
                        </div>
                        <p>查看更多</p>
                    </a>
                </li>
            </ul>
        </div>
        <div class="channel">
            <div>
                <p>频道与话题</p>
                <p>查看更多
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiantouyou"></use>
                    </svg></p>
            </div>
            <ul>
                <li>
                    <a href="javascript:;">
                        <p># 宅舞翻跳
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-tuijian1"></use>
                            </svg>
                        </p>
                    </a>
                </li>
                <li><a href="javascript:;">
                        <p># 极限竞速地平线4</p>
                    </a></li>
                <li>
                    <a href="javascript:;">
                        <p># 王楚钦
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-fenlei-remen"></use>
                            </svg>
                        </p>
                    </a>
                </li>
                <li><a href="javascript:;">
                        <p># 蓝色战衣</p>
                    </a></li>
            </ul>
        </div>


        <div class="context">
            <ul>
                <li>
                    <a href="./bilibili5.html">
                        <img src="../img/bilibili2/哥俩美食.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="./bilibili5.html">
                        <div>
                            <p>哥俩美食</p>
                            <p>23小时前•投稿了视频</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="./bilibili5.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-gengduo1"></use>
                        </svg>
                    </a>
                </li>
            </ul>
            <div>
                <img src="../img/bilibili2/哥俩美食shipin.jpg" alt="">
                <div>
                    <ul>
                        <li>09:03</li>
                        <li>3.9万观看</li>
                        <li>296弹幕</li>
                    </ul>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bofangqi-bofangxiaodianshi"></use>
                    </svg>
                </div>
            </div>
            <p>外卖小哥干到很晚才回家饿坏了，吃三个鸡肉卷...</p>
            <div>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xiaoxi1"></use>
                </svg>
                <p>
                    <span>imba-pizza：</span>省流助手：请看其他的省流助手
                </p>
            </div>
            <ul>
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yduifenxiang2"></use>
                    </svg>6
                </li>
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaoxi"></use>
                    </svg>155
                </li>
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dianzan"></use>
                    </svg>3533
                </li>
            </ul>
        </div>

    </div>



    <ul class="bnav">
        <li>
            <a href="./bilibili1.html">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-wode"></use>
                </svg>
                <p>首页</p>
            </a>
        </li>
        <li>
            <a href="./bilibili2.html">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-dongtai"></use>
                </svg>
                <p>动态</p>
            </a>
        </li>
        <li>
            <a href="#">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-checkbox-plus-full-copy"></use>
                </svg>
            </a>
        </li>
        <li>
            <a href="./bilibili3.html">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-gouwudai"></use>
                </svg>
                <p>会员购</p>
            </a>
        </li>
        <li>
            <a href="./bilibili4.html">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-wodewo"></use>
                </svg>
                <p>我的</p>
            </a>
        </li>
    </ul>
    <script>
        var ul = document.getElementsByClassName("top");
        var p = ul[0].getElementsByTagName("p");
        var content = document.getElementsByClassName("visible");
        var body = document.getElementsByTagName("body")[0];
        var pink = document.querySelector(".pink");

        var hammertnav = new Hammer(body);
        hammertnav.on("swipeleft", tabl);
        hammertnav.on("swiperight", tabr);
        console.log(p, content);


        for (var i = 0; i < p.length; i++) {
            p[i].index = i;
            p[i].onclick = tab;
        }

        function tab() {
            for (j = 0; j < p.length; j++) {
                p[j].classList.remove("cur");
                content[j].classList.remove("show");
            }
            this.classList.add("cur");
            content[this.index].classList.add("show");
            if(this.index==0){
                pink.style.right="20.2rem";
            }else{
                pink.style.right="12rem";
            }
        };

        function tabl() {
            p[0].classList.remove("cur");
            p[1].classList.add("cur");
            content[0].classList.remove("show");
            content[1].classList.add("show");
            pink.style.right="12rem";
        };

        function tabr() {
            p[1].classList.remove("cur");
            p[0].classList.add("cur");
            content[1].classList.remove("show");
            content[0].classList.add("show");
            pink.style.right="20.2rem";
        };


        var con = document.querySelectorAll(".visible");
        var xmlhttp;
        if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp = new XMLHttpRequest();
        } else {
            // IE6, IE5 浏览器执行代码
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                //xmlhttp.responseText;
                //你的ajax代码写在这里，其他位置除了open的前两个参数都不需要也不要改变。
                //ajax加载成功之后的代码执行位置
                var data = JSON.parse(xmlhttp.responseText);
                for (var i = 0; i < data.length; i++) {
                    for (var j = 0; j < 2; j++) {
                        con[j].appendChild(newNode());
                    }

                }
                var div = document.getElementsByClassName("context");
                for (var i = 0; i < div.length; i++) {
                    var zan = div[i].querySelector("ul:nth-of-type(2)>li:last-child");
                    zan.onclick = function () {
                        this.classList.toggle("thumbs-up");
                    }
                }

                function newNode() {
                    var ndiv = document.createElement("div");
                    ndiv.className = "context";
                    ndiv.innerHTML = `
                        <ul>
                            <li>
                                <a href="javascript:;">
                                    <img src="${data[i].upimg}" alt="">
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <div>
                                        <p>${data[i].upname}</p>
                                        <p>${data[i].time}</p>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-gengduo1"></use>
                                    </svg>
                                </a>
                            </li>
                        </ul>
                        ${data[i].title}
                        <div>
                            <img src="${data[i].videoimg}" alt="">
                            <div>
                                <ul>
                                    <li>${data[i].vtime}</li>
                                    <li>${data[i].watch}</li>
                                    <li>${data[i].egg}</li>
                                </ul>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-bofangqi-bofangxiaodianshi"></use>
                                </svg>
                            </div>
                        </div>
                        <p>${data[i].ltitle}</p>
                        <div>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-xiaoxi1"></use>
                            </svg>
                            <p>
                                <span>${data[i].user}</span>${data[i].usercomment}
                            </p>
                        </div>
                        <ul>
                            <li>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-yduifenxiang2"></use>
                                </svg>${data[i].share}
                            </li>
                            <li>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-xiaoxi"></use>
                                </svg>${data[i].comment}
                            </li>
                            <li>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-dianzan"></use>
                                </svg>${data[i].zan}
                            </li>
                        </ul>
                    </div>`;
                    return ndiv;
                }
                //只有用http的方式查看网页的运行结果才可以避免用本地网页的方式查看ajax运行结果。
                //vs code中可以使用liver server，post请求用专业的HTTP服务器
            }
        }
        xmlhttp.open("GET", "http://rap2api.taobao.org/app/mock/295104/FQ/bilibili2", true);
        xmlhttp.send();
    </script>
</body>

</html>